import React, { useState, useEffect } from 'react';
import { Radio, Switch } from 'antd';
import FormItem from 'antd/lib/form/FormItem';
import { filterObjectNullKeys } from 'src/libs/utils';
import DragContainer from './Drag/DragContainer';
import { DL_CODE } from './EnumConfig';

interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
	dragOver: ( value: string ) => void;
	currentDragNode: any;
}

const QuotaData = ( props: IProps ) => {
	const { config, onValuesChange, form, dragOver, currentDragNode } = props;

	const [ quotaType, setType ] = useState( config.data.quotaType || 'core' );

	const [ isYOYAvailable, setYOYAvailable ] = useState( config.data.isYOYAvailable === true ? true : false );

	const [ isMOMAvailable, setMOMAvailable ] = useState( config.data.isMOMAvailable === true ? true : false );

	const name = 'coreKey';
	const dateKey = 'coreDate';

	const handleContentChange = ( event ) => {
		setType( event.target.value );
		form.setFieldsValue( { quotaType: event.target.value } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'data' );
	};

	const YOYChange = ( value ) => {
		setYOYAvailable( value );
		form.setFieldsValue( { isYOYAvailable: value } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'data' );
	};

	const MOMChange = ( value ) => {
		setMOMAvailable( value );
		form.setFieldsValue( { isMOMAvailable: value } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'data' );
	};

	useEffect( () => {
		setYOYAvailable( config.data.isYOYAvailable === true ? true : false );
		setMOMAvailable( config.data.isMOMAvailable === true ? true : false );
	}, [ config.data.isYOYAvailable, config.data.isMOMAvailable ] );

	return (
		<>
			<FormItem label="类型" name="quotaType">
				<Radio.Group value={ quotaType } defaultValue={ quotaType } onChange={ handleContentChange }>
					<Radio value="core">核心指标</Radio>
					<Radio value="percent">百分比指标</Radio>
				</Radio.Group>
			</FormItem>

			<FormItem label="取值字段" name={ name }>
				<DragContainer
					form={ form }
					name={ name }
					tip='拖入度量'
					type={ DL_CODE }
					config={ config }
					dragOver={ dragOver }
					currentDragNode={ currentDragNode }
					onValuesChange={ onValuesChange }
				></DragContainer>
			</FormItem>

			<FormItem label="是否开启同比" name="isYOYAvailable">
				<Switch checked={ isYOYAvailable } onChange={ YOYChange }/>
			</FormItem>

			<FormItem label="是否开启环比" name="isMOMAvailable">
				<Switch checked={ isMOMAvailable } onChange={ MOMChange }/>
			</FormItem>

			{
				( isYOYAvailable || isMOMAvailable ) && (
					<FormItem label="日期字段" name={ dateKey }>
						<DragContainer
							form={ form }
							name={ dateKey }
							tip='日期字段'
							type={ config.type }
							config={ config }
							dragOver={ dragOver }
							currentDragNode={ currentDragNode }
							onValuesChange={ onValuesChange }
						></DragContainer>
					</FormItem>
				)
			}
		</>


	);
};

export default React.memo( QuotaData );
